<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>自媒体</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/see/selfMedia.min.css?v=<%=$version%>">
</head>
<body>
<div id="selfMedia" v-cloak>
    <template>
        <see-header :number="3"></see-header>
    </template>
    <aside class="selfMedia-topSlide" id="selfMediaSlide1">
        <basic-slide :list="garouselList"></basic-slide>
    </aside>
    <div class="selfMedia-nav clearfix">
        <a class="selfMedia-navWhole">
            <span class="selfMedia-whole"></span>
            <strong>全部分类</strong>
        </a>
        <div class="selfMedia-navList clearfix">
            <a v-for="item in allCategoryList" @click="getNext(item.categoryId,item.name)">
                <span :style="bgimg(item.imgSrc)"></span>
                <strong>{{item.name}}</strong>
            </a>
            <!--<a>-->
                <!--<span class="selfMedia-whole"></span>-->
                <!--<strong>全部分类</strong>-->
            <!--</a>-->
        </div>
    </div>
    <div class="selfMedia-heat">
        <div class="selfMedia-heatTitle">
            <span class="selfMedia-hotmore"></span>
        </div>
        <div class="selfMedia-heatSlide">
            <selfmedia-slide :list="topList"></selfmedia-slide>
            <!--<div class="swiper-container">-->
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide" v-for="(item,index) in topList">-->
                        <!--<p class="heatSlide" v-if="item.categoryName">{{item.categoryName}}</p>-->
                        <!--&lt;!&ndash;<span v-if="index==0" class="selfMedia-top1"></span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span v-if="index==1" class="selfMedia-top2"></span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span v-if="index==2" class="selfMedia-top3"></span>&ndash;&gt;-->
                        <!--<span :class="{'0':'selfMedia-top1','1':'selfMedia-top2','2':'selfMedia-top3'}[''+index]"></span>-->
                        <!--&lt;!&ndash;<div :data-background="item.coverImgSrc" class="swiper-lazy">&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<div class="swiper-lazy-preloader"></div>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                        <!--<img :src="item.coverImgSrc" class="swiper-lazy">-->
                        <!--<div class="heatSlide-info">-->
                            <!--<h6>{{item.title}}</h6>-->
                            <!--<p><span class="selfMedia-hetz">{{item.praiseCount}}</span><span class="selfMedia-map">{{item.cityName}}</span></p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
    <div class="selfMedia-cent">
        <div class="selfMedia-tab">
            <span :class="{active:(indexs==1)}" @click="centTitleTab(1)">人气</span>
            <strong></strong>
            <span :class="{active:(indexs==2)}" @click="centTitleTab(2)">附近</span>
        </div>
        <template v-if="indexs==1">
            <selfmedia-flow :list="hotAdvList2"></selfmedia-flow>
        </template>
        <template v-if="indexs==2">
            <selfmedia-flow :list="nearbyAdvList2"></selfmedia-flow>
        </template>

        <!--<div class="selfMedia-tabCent">-->
            <!--<div class="selfMedia-list" v-for="item in hotAdvList2">-->
                <!--<img :data-original="item.coverImgSrc" class="lazy">-->
                <!--<template v-if="item.advType==1">-->
                    <!--<p class="heatSlide">{{item.categoryName}}</p>-->
                    <!--<div class="heatSlide-info">-->
                        <!--<h6>{{item.title}}</h6>-->
                        <!--<p class="clearfix">-->
                            <!--<span class="selfMedia-hetz">{{item.praiseCount}}55</span>-->
                            <!--<span class="selfMedia-map">{{item.cityName}}</span>-->
                            <!--<span class="selfMedia-money">赚<span>{{item.rewardCount}}555</span></span>-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</template>-->
                <!--<template v-if="item.advType==2">-->
                    <!--<div class="advType-info">广告<span class="advType-infoData">{{item.vedioLength}}<span></span>抢红包</span></div>-->
                <!--</template>-->
            <!--</div>-->
        <!--</div>-->
        <div class="loadtip" v-if="loadFlag"></div>
    </div>
    <footer-view :number="1"></footer-view>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script type="text/javascript" src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=589381d73924ac781b542765046f3235"></script>
<script type="text/javascript" src="/js/see/remogeo.js"></script>
<script type="text/javascript" src="/js/see/selfMedia.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper("#selfMediaSlide1 .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper = new Swiper('.selfMedia-heatSlide .swiper-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3,
            loadOnTransitionStart: true
        },
        // lazyLoading : true,
        // lazyLoadingInPrevNext : true,
        // lazyLoadingInPrevNextAmount : 3,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
</script>
</body>
</html>